<template>
  <div class="comment_wide_body">
    <div class="comment_narrow_body">
        <div class="comment_header_box">

        </div>
        <!-- <div ></div> -->
        <commentSend placeholder="发一条评论" @commentSubmitEvent="handlerComment"></commentSend>
        <div class="comment_list_box">
            <commentList 
              :infoData="infoData"
              :commentList="dataList"
              :pageData="pageData"
              @pageChangeEvent="handlerPageChange">
            </commentList>
        </div>
        
    </div>
  </div>
</template>

<script>
import commentSend from './comment-send'
import commentList from './comment-list'
export default {
  components: {
    commentList,
    commentSend,
  },
  mounted() {
    this.getDataList();
  },
  props:{
      // 与 "信息" 相关的信息
      infoData: Object,
  },
  data() {
    return {
        // 对于某一个 消息 的 评论
        dataList: [/*
            {
                commentId:1,
                infoId:1,
                uid:2,
                toId:1,
                commentContent:"评论1",
                replyNum: 6,
                createTime: '2021/05/10 18:41:12',
                nickName: '老朱',
                portrait:'',
            },{
                commentId:2,
                infoId:1,
                uid:3,
                toId:1,
                commentContent:"评论2",
                replyNum: 14,
                createTime: '2021/05/10 18:45:12',
                nickName: '43',
                portrait:'',
            },*/
        ],
        // 与分页相关的数据
        pageData:{
          currentPage: 1,
          pageSize: 3,
          totalPage: this.infoData.commentNum,
        },
        
    }
  },
  methods: {
    // 对 消息 进行评论【增加 comemnt】
    handlerComment(comment){
      var data = {
        "infoId": this.infoData.infoId,
        "uid": this.currentUser.user.uid,
        "toId": this.infoData.userId,
        "commentContent": comment
      }
      console.log("需提交对消息的评论:", data)
      this.$http1({
        url: this.$http.adornUrl("/user/info/comment/save"),
        method: "post",
        data: this.$http.adornData(data, false)
      }).then(({ data }) => {
        this.infoData.commentnum++;
        this.getDataList();
      });
      
    },
    // 分页获取 comment 【分页获取】
    getDataList(){
      console.log("tips：分页获取comment")
      var data={
        page: ''+this.pageData.currentPage,
        limit: ''+this.pageData.pageSize,
        sidx:'create_time',
        order: 'desc',
      }
      this.$http1({
        url: this.$http.adornUrl(`/user/info/comment/list/${this.infoData.infoId}`),
        method: "post",
        data: this.$http.adornData(data, false)
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "获取评论!",
        });
        this.dataList = data.page.list;
        this.pageData.totalPage = data.page.totalPage;
        
      });
    },
    // 页码发生修改，重新获取comment
    handlerPageChange(data){
      this.pageData.currentPage = data;
      
      this.getDataList();
    },
  },
}
</script>

<style>
.comment_wide_body{
    width: 100%;
}
.comment_narrow_body{
    width: 92%;
    margin: 10px auto 0 auto;
    padding-bottom: 10px;
    
}
.comment_header_box{

}


.comment_list_box{

}
</style>